<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
       
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta charset="UTF-8">
        <title>register</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" th:href="@{css/CustomForm.css}">

</head>
<body>
<div class="topDiv">
    <header>
        <h1>Easy to register, happy to live!</h1>
    </header>
    <section>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Register</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="username" class="customLabel" id="usernameLabel">
                        Your username
                    </label>
                    <input type="text" id="username" class="customInput" name="username" required
                           placeholder="username">
                </p>
                <p>
                    <label for="password" class="customLabel" id="passwordLabel">
                        Your password
                    </label>
                    <input type="password" id="password" class="customInput" name="password" required
                           placeholder="password">
                </p>
                <p>
                    <label for="password" class="customLabel" id="confirmPasswordLabel">
                        Confirm password
                    </label>
                    <label for="confirmPassword"></label>
                    <input type="password" id="confirmPassword"
                           class="customInput" required
                           placeholder="confirm password">
                <form>
                    <label>
                        <input type="radio" name="type" value="graduate" checked>Graduate
                    </label>
                    <label>
                        <input type="radio" name="type" value="company">Company
                    </label>
                </form>
                </p>
                <input type="reset" data-editable="false" value="Reset" class="formButton">
                <button id="submitButton" class="formButton">Sign up</button>
                <br>
                <a href="/userRecovery">Forgot password?</a>
                <a href="/login">Already register?</a>
                <div class="divideLine"></div>
                <span id="registerResult"></span>
            </div>
        </div>
    </section>
</div>
</body>
<script>
    $(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
        $("#submitButton").click(function () {
            let username = $("#username").val();
            let password = $("#password").val();
            let confirmPassword = $("#confirmPassword").val();
            if (password.length < 5 || password.length > 50) {
                // $("#passwordLabel").after("<span style='color: red'> Password length should be 5-10</span>")
                $("#passwordLabel").html("<span style='color: red'> Password length should be 5-10</span>");
                return;
            } else {
                $("#passwordLabel").html("<span style='color: green'>Correct password length</span>")

            }

            if (confirmPassword !== password) {
                $("#confirmPasswordLabel").html("<span style='color: red'>Not matched, try again!</span>")
                return;
            } else {
                $("#confirmPasswordLabel").html("<span style='color: green'>matched, congratulations!</span>")
            }
            $.post("/doRegister", {
                "username": username,
                "password": password,
                "type": $("input:radio:checked").val().toUpperCase()
            }, function (data, status, jqXHR) {
                if (data) {
                    if (data.toString() === "true") {
                        $("#registerResult").html("<span style='color: green'>Register succeeded! <a href='/login'>login</a></span>");
                        $("#usernameLabel").html("<span style='color: green'>Valid username!</span>")
                    } else {
                        $("#usernameLabel").html("<span style='color: red'>Invalid username! Try another.</span>")
                        $("#registerResult").html("<span style='color: red'>Register failed!</span>");
                    }

                }
            })
            // alert("username: " + username + " password: " + password + " " + $("input:radio:checked").val());
        })
    });
</script>
</html>